<template>
	<view>
		<view class="searchBox pL15 pR15 ">
			<u-search placeholder="搜索" v-model="query.oddJobName" height="80" :show-action="false"
				bg-color="#F7F8FB" shape="square" @change='search'>
			</u-search>
		</view>
		<mescroll-uni class="lisBox" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:down="downOption" :up="upOption" :bottombar="false" :top="120">
			<view class="pB15 mL15 mR15">
			<view class="jobCard" v-for="(item,i) in list" :key="item.id"
			 @click="xf.onlineUtils.route(`/pages/userPage/subpackge/oddJob/jobDetail/jobDetail?id=${item.infoId}&suggestId=${item.suggestId}`)">
				<view class="flex  alg-center jst-between" >
					<view class="w75 flex alg-center">
						<text class="jobTitle" :class="xf.getItemClass(item)">{{item.oddJobName}}</text>
						<u-tag v-if="item.izUrgent==1" :text="item.izUrgentText" bg-color="#fff" class="jpTag" :color="'#FF0000'" :border-color="'#FF0000'"
							 />
						<u-tag v-if="item.recruitmentCarefree&&item.recruitmentCarefree.indexOf('10')>=0" text="用工无忧" bg-color="#EAF4FE" class="zgTag" :color="'#3291F8'" :border-color="'#EAF4FE'"
							 />	
						
					</view>
					<view class="jobMoney txt-ellipsis  font20 u-red">{{item.salary}}<text class="jobUint font13">元</text>
					</view>
				</view>
				<view class="flex alg-center flex-wrap">
					<view class="jobTime">{{item.jobBeginDatetime}}-{{item.jobEndDatetime}}</view>
					<view class="jobTime">{{item.salaryPaymentText}}</view>
					<view class="jobTime">招{{item.oddJobUseNum}}人</view>
				</view>
				<view class="flex alg-center jst-between mT10">
					<view class="jobPos flex alg-center w70">
						<image class="posImg" :src="resources.posIcon" mode=""></image>
						<text class="posTxt mL5 txt-ellipsis">{{item.hopeWorkAddress}}</text>
					</view>
					<!-- <view class="font13 u-6">{{item.distance}}</view> -->
				</view>
				<view class="flex alg-center jst-between">
					<view class="flex alg-center mT5">
						<u-image :width="48" :height="48" v-if="item?.comOrUserProfile"
							:src="xf.getImgUrl(item?.comOrUserProfile)" mode=""></u-image>
						<image v-else class="companyImg" :src="resources.defaultHeader" mode=""></image>
						<text class="companyName">{{item.userOrComName}}</text>
						<block v-if="item.comOrUserIzAuth==1">
							<image v-if="item.oddReleaseType==1"  class="rzImg" :src="resources.qyrzLogo" mode=""></image>
							<image v-else  class="rzImg" :src="resources.grrzLogo" mode=""></image>
							
						</block>
						
					</view>
				<!-- 	<view class="bmBtn pointer" >立即报名</view> -->
				</view>
				
				
				<view class=" mT15 u-org tjHf flex alg-center">
					<image class="imgW32" :src="resources.tjHire"></image>
					<text class="mL5 font14">{{item.suggestContent}}</text>
					
				</view>
			</view>
			
			</view>
		</mescroll-uni>
		
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {getLocal} from "@/libs/map.js"
	import {recommendJob} from '@/api/userInterface/user.js'
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				downOption: {
					use: true,
					auto: false
				},
				query: {
					oddJobName: '',
					pageSize:10,
					longitude:'',
					latitude:'',
					pageNo:1
					
				},
				upOption: {
					page: {
						num: 0,
						size: 10,
						time: null
					},
					empty: {
						use: true,
						icon: '/static/image/nodata.png',
						tip: "暂无数据",
						fixed: true
					},
					textNoMore: "到底啦~",
				},
				list: [],
				curretnTab: 0,
				tabLis: [{
						name: "全部",
						value: ""
					},
					{
						name: "已报名",
						value: 1
					},
					{
						name: "已拒绝",
						value: 4
					},
				],


			};
		},
		onShow(e) {
			this.mescroll&&this.mescroll.triggerDownScroll()
		},
		methods: {
			canselSs(e){
				
			},
			
			search() {
				this.list = [];
				this.mescroll.resetUpScroll();
			},
			async upCallback(page) {
				if (page.num == 1) this.list = [];
				this.query.pageNo=page.num;
				const {lat,lon} = await this.xf.getLatOrLon();
				this.query.longitude=lon;
				this.query.latitude=lat;
				recommendJob(this.query).then(res => {
					let list = res.result.records;
					this.list = this.list.concat(list);
					this.mescroll.endSuccess(res.result.records.length);
					

				}).catch(err => {
					this.mescroll.endByPage(0, 0);
					this.mescroll.endSuccess(1);
					this.mescroll.endErr();
				})
				
			},
		}
	};
</script>
<style lang="scss">
	page {
		height: 100%;
		
		background: linear-gradient(0deg, #F7F8FB, #E1EEFF);
	}
</style>
<style scoped lang="scss">
	.tjHf{
		padding: 0 30rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: #F5F6F9;
		border-radius: 10rpx;
	}
	.jobCard{
		padding: 20rpx 30rpx;
		margin-bottom: 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		.jobName{
			// max-width:200rpx;
		}
		.jobLeft{
			width:70%;
		}
		.jobStatus{
			border:2rpx solid #FF0000;
			border-radius:10rpx;
			height:34rpx;
			line-height:34rpx;
			padding: 0 10rpx;
			margin-right:10rpx;
		}
		.jobTag{
			height:34rpx;
			line-height:34rpx;
			padding:0 10rpx;
			background: #F8F8F8;
			border-radius: 6rpx;
		}
		.jobMoney{
		  word-break: keep-all;
		}
		.jobTime{
			color:#8D8D8D;
			font-size:26rpx;
			margin-right:10rpx;
			height: 44rpx;
			line-height:44rpx;
			padding:0 20rpx;
			background: #F8F8F8;
			border-radius: 6rpx;
			margin-top:16rpx;
		}
		.posImg{
			width:32rpx;
			height:32rpx;
		}
		.posTxt{
			width:calc(100% - 42rpx);
			font-weight: 400;
			font-size: 26rpx;
			color: #8D8D8D;
		}
		.companyImg{
			width: 48rpx;
			height: 48rpx;
		}
		.rzImg{
			width: 24rpx;
			height: 24rpx;
		}
		.companyName{
			font-weight: 500;
			font-size: 30rpx;
			color: #333;
			margin-right: 10rpx;
			margin-left: 10rpx;
		}
	}
</style>